<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bs/css/bootstrap.css">
    <style>
        body {
            background-color: #9d9d9d;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="page-header">
                <h1>itlike撩课</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
               <!-- <router-link class="list-group-item" to="/router">HTML5学院</router-link>
                <router-link class="list-group-item" to="/java">Java学院</router-link>
                <router-link class="list-group-item" to="/ios">Python学院</router-link>-->
                <router-link class="list-group-item" :to="{name:'router'}">HTML5学院</router-link>
                <router-link class="list-group-item" :to="{name:'java'}">Java学院</router-link>
                <router-link class="list-group-item" :to="{name:'ios'}">Python学院</router-link>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <!-- 路由出口 -->
                    <!-- 路由匹配到的组件将渲染在这里 -->
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</div>

//配置跳转
<template id="router">
    <div>
        <h2>路由组件</h2>
        <p>hello router</p>
        <img src="1.jpg" alt="" width="164">
        <div>
            <ul class="nav nav-tabs">
                <router-link  to="/router/basic">基础班</router-link>
                <router-link  to="/router/big">大神班</router-link>
            </ul>
            <div>
                <router-view></router-view>
            </div>
        </div>
   
    </div>

</template>

<template id="basic">
    <div>
        <h2>基础班</h2>
        <p>hello快速上手</p>
        <img src="1.jpg" alt="" width="164">
    
    </div>

</template>
<template id="big">
    <div>
        <h2>大神班</h2>
        <p>hello 精通知识</p>
        <img src="1.jpg" alt="" width="164">
    
    </div>

</template>

<template id="ios">
    <div>
        <h2>路由组件</h2>
        <p>hello ios</p>
        <img src="1.jpg" alt="" width="164">
    </div>

</template>

<template id="java">
    <div>
        <h2>Python学院</h2>
        <p>现在好火热呀!</p>
        <img src="1.jpg" alt="" width="250">
    </div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
    //1.创建组件
    const Router = Vue.extend({
        template: '#router'
    });
    const  Basic = Vue.extend({
        template: '#basic'
    });
    const  Big = Vue.extend({
        template: '#big'
    });
    const IOS = Vue.extend({
        template: '#ios'
    });
    const Java = Vue.extend({
        template: '#java'
    });
    //2.定义路由
    const routes = [
        {
            path: '/router',
            name:'router',
            component: Router,
            children:[
                {path: 'basic', component: Basic},
                {path: 'big', component: Big},
                //配置根路由
                {path: '/', redirect: 'basic'}
                ]
        },
        {
            path: '/ios',
            name:'ios',
            component: IOS
        },
        {
            path: '/java',
            name:'java',
            component: Java},
        //配置根路由
        {path: '/', redirect: 'router'}


    ];
    //3.创建路由实例
    const router = new VueRouter({
        routes
    });

    //4.创建Vue实例 把router挂载到vue上
    new Vue({
        router
    }).$mount('#app');
    console.log(Vue);

</script>
</body>
</html>